<template>
  <div class="case_download_box">
    <div class="query_box">
      <span>关键字：</span>
      <input @keydown.13="getCaseList" v-model="AJMC"/>
      <!--      <span>部门受案号:</span>-->
      <!--      <input @keydown.13="getCaseList" v-model="BMSAH"/>-->
      <!--      <span>受理日期:</span>-->
      <!--      <el-date-picker @change="getCaseList" v-model="datetime"-->
      <!--                      type="daterange"-->
      <!--                      style="margin-left: 10px;width: 250px;margin-top: 4px"-->
      <!--                      range-separator="-"-->
      <!--                      value-format="yyyy-MM-dd"-->
      <!--                      start-placeholder="开始日期"-->
      <!--                      size="small"-->
      <!--                      end-placeholder="结束日期">-->
      <!--      </el-date-picker>-->
      <div style="top: 0;right: 10px;background:white;position: absolute;height: 40px;padding-top: 5px;">
        <el-button size="mini" type="primary"
                   @click="getCaseList">查询
        </el-button>
        <el-button size="mini" type="primary"
                   @click="downloadCase">{{isBrowser?'导入':'下载'}}
        </el-button>
      </div>
    </div>
    <div class="downtable">
      <el-table :data="allCase" border highlight-current-row @current-change="handleCurrentChange"
                style="width: 100%;height: 100%;" :cell-style="cellStyle">
        <el-table-column property="AJMC" label="案件名称" align="center"></el-table-column>
        <el-table-column property="BMSAH" label="部门受案号" width="280" align="center"></el-table-column>
        <el-table-column property="AJLB_MC" label="案件类别" width="120" align="center"></el-table-column>
        <el-table-column property="DQJD" label="当前阶段" width="120" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import ICE from '../common/ICEHelper'

  export default {
    name: 'CaseDownload',
    data () {
      return {
        datetime: '',
        currentRow: null,
        AJMC: '',
        BMSAH: '',
        allCase: [],
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state[ 'mainPage'].userInfo
      })
    },
    mounted () {
      this.getCaseList()
    },
    methods: {
      cellStyle ({row, column, rowIndex, columnIndex}) {
        let isSelect = this.currentRow && row.BMSAH === this.currentRow.BMSAH
        return {
          background: isSelect ? '#157ac1' : '#fff',
          color: isSelect ? '#fff' : '#000',
          padding: '8px 0'
        }
      },
      handleCurrentChange (row) {
        this.currentRow = row
      },
      // 下载列表
      async getCaseList () {
        try {
          this.loadStatus({loading: true, loadingText: '正在获取案件列表'})

          console.log('getCaseList', this.userInfo)

          this.allCase = await ICE.GetCaseList({
            UnitCode: this.userInfo.unitCode || this.userInfo.DWBM,
            UserCode: this.userInfo.GH,
            CaseName: this.AJMC
          })
          // ,
          // BMSAH: this.BMSAH,
          // SLRQKS: this.datetime ? this.datetime[0] : '',
          // SLRQJS: this.datetime ? this.datetime[1] : ''
        } catch (err) {
          this.$alert(err.message, '获取案件列表失败', {type: 'error'})
        } finally {
          this.loadStatus({loading: false})
        }
      },
      // 下载案件
      downloadCase () {
        if (this.currentRow) {
          this.$emit('selected', this.currentRow)
        } else {
          this.$alert('没有选中下载案件', '提示', {type: 'warning'})
        }
      }
    }
  }
</script>

<style scoped>
  .case_download_box {
    height: 100%;
    width: 100%;
    background: #fff;
  }

  .query_box {
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: relative;
    overflow: hidden;
  }

  .query_box > input {
    width: calc(50% - 330px);
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 5px 0;
    padding: 0 10px;
    margin-left: 10px;
  }

  .query_box > span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    font-size: 14px;
  }

  .downtable {
    height: calc(100% - 40px);
  }

</style>
